<template>
  <div>
    <article class="main-breadcrumb">
      <el-breadcrumb separator=">" class="main-breadcrumb-wrap">
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">设备管理</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home" @click="back()">鱼池管理</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">历史投料数据</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </article>
    <div style="margin:1rem;margin-left:2rem">
      <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">

        <el-form-item label="">
          <el-date-picker @change="getChart" v-model="startAndEndTime" align="right" type="datetimerange" value-format=yyyy-MM-dd format=yyyy-MM-dd range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <div class="search-btn" @click="onSubmit"></div>
        </el-form-item>
        <el-form-item>
          <div class="reset-btn" @click="resetForm"></div>
        </el-form-item>

      </el-form>
    </div>
    <div style=" margin: 2rem;display: flex;margin-top:-1rem">
      <div style="width: 100%;min-height: 50rem;">
        <div class="allTw">
          历史投喂总量:{{totalTw.toFixed(2)}}(公斤)
        </div>
        <NxTable :table-cols="tableCols" :table-data="tableData" :pag-ination="pagination" class="table-wrap" @refresh="refresh">
          <template slot="createDate" slot-scope="scope">
            <span> {{ scope.row.createDate | dateTimeFormat }}</span>
          </template>
        </NxTable>
      </div>

    </div>
  </div>
</template>
<script>
import { Page } from '@/utils/pagination'
import NxTable from '@/components/NxTable.vue'
import moment from 'moment'
import mixin from '@/api/CompanyInfoTree.js'
import { getObjFishpondTotalList, getObjFishpondTotal } from '@/api/home'
export default {
  mixins: [mixin],
  components: {
    NxTable
  },
  props: {},
  // 表格数据
  data() {
    return {
      activeName: 'first',
      totalTw: '',
      // 查询字段
      searchForm: {
        id: '',
        baseId: '',
        companyId: ''
        // mode: 0,
      },
      startAndEndTime: '',
      tableData: [],
      typeDialog: false,
      addEditIsDialog: false, // 添加编辑页面状态
      date: [], // 日期范围
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      options: [
        {
          value: '0',
          label: '最近一天'
        },
        {
          value: '1',
          label: '一周'
        },
        {
          value: '2',
          label: '最近一月'
        },
        {
          value: '3',
          label: '最近一年'
        }
      ],
      modeType: [
        { value: 0, label: '实时数据' },
        { value: 1, label: '统计数据' }
      ],
      tableCols: [
        {
          label: '鱼池名称',
          prop: 'name',
          align: 'center'
          // width: 200,
        },
        {
          label: '投喂量(公斤)',
          prop: 'value',
          align: 'center'
          // width: 200,
        }
      ],
      tableData: [],
      pagination: new Page()
    }
  },
  filters: {
    dateTimeFormat(dateTime) {
      if (!dateTime) {
        return dateTime
      }
      return moment(dateTime).format('YYYY-MM-DD')
    }
  },
  // 初始化加载
  mounted() {
    this.searchForm.id = this.$route.query.id
    this.seeType = false
    setTimeout(() => {
      this.getLists()
    }, 200)
  },
  // 自定义方法
  methods: {
    handleClick(val) {
      this.getLists()
    },
    getChart(val) {
      this.searchForm.timeType = ''
      this.searchForm.startDate = val[0]
      this.searchForm.endDate = val[1]
      this.getList()
      this.getLists()
    },
    // 返回
    back() {
      this.$router.push({
        path: `/breeding/fishpond`
      })
    },
    // 重置
    resetForm() {
      this.startAndEndTime = ''

      this.searchForm.startDate = ''
      this.searchForm.endDate = ''
      this.onSubmit()
    },
    // 查询
    onSubmit() {
      this.pagination.pageNum = 1

      this.getLists()
    },
    // 分页查询
    refresh(val) {
      this.searchForm.pageNum = val.pageNum
      this.searchForm.pageSize = val.pageSize
      this.getLists()
    },
    changemode(nowd) {
      this.searchForm.mode = nowd

      this.getLists()
    },
    // 范围切换
    changeDate(nowd) {
      this.searchForm.timeType = nowd
      // console.log(nowd);

      this.getLists()
    },
    getLocalTime(nS) {
      return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, ' ')
    },
    // 获取列表列表
    getLists() {
      getObjFishpondTotalList(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.data
          this.pagination.count = res.data.total
        }
      })
      getObjFishpondTotal(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.totalTw = res.data
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.allTw {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 1.5rem;
}
/deep/.el-tabs__item {
}

.main-breadcrumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 76px;
  border-bottom: solid 20px #f2f2f2;
  padding-left: 20px;

  .main-breadcrumb-wrap {
    font-size: 16px;
    line-height: 68px;

    .main-breadcrumb-home {
      cursor: pointer;
      color: #666666;
      font-weight: bold;
    }

    .main-breadcrumb-sp {
      color: #666666;
      font-weight: bold;
    }
  }
}

.length {
  position: absolute;
  top: 2rem;
  right: 3.74rem;
  display: flex;
  align-items: center;

  .litem {
    display: flex;
    align-items: center;
    color: black;
    font-size: 0.93rem;
    margin-left: 2.1vw;

    img {
      width: 0.94vw;
      height: 1.1vw;
      margin-right: 0.5vw;
    }

    .line {
      width: 0.94vw;
      margin-right: 0.47vw;
      border-top: 1px dashed #00fcf9;
    }
  }
}

.flexc {
  display: flex;
  align-items: center;
  justify-content: center;
}

.echartline {
  width: 100%;
  height: 22vw;
  margin-top: 10.4vw;
}
</style>
  